<template>
	<view>
		<u-back-top :scroll-top="scrollTop" icon="arrow-up" top="200" bottom="240" right="30" :iconStyle="iconStyles"
			:customStyle="topStyles"></u-back-top>
		<view class="header">
			<view id="search-bar">
				<u-search bgColor="#f4f3fd" shape="square" :showAction=false color="#b8b8d2" maxlength=64 height="96rpx"
					searchIconSize="48rpx" v-model="keyword" @clear="clear" @search="search"></u-search>
			</view>
		</view>
		<view class="header">
			<view id="search-bar">
				<u-search bgColor="#f4f3fd" shape="square" :showAction=false color="#b8b8d2" maxlength=64 height="96rpx"
					searchIconSize="48rpx" v-model="keyword" @clear="clear" @search="search"></u-search>
			</view>
		</view>
		<view class="block"></view>
		<view v-if="loaded && exams.length == 0" style="margin-top: 40%;">
			<u-empty iconSize="320" textSize="36" iconColor="#3d5cff" textColor="#1f1f39" mode="list"></u-empty>
		</view>
		<view class="search-result">
			<view id="cell" v-for="(item,index) in exams" :key="index">
				<view id="icon">
					<u-icon name="/static/icon/exam.png" size="96"></u-icon>
				</view>
				<text id="join" v-if="isExamJoinable(item)" @click="toExamPage(item.id)">进入</text>
				<u-icon id="join-arrow" name="arrow-right-double" v-if="isExamJoinable(item)" @click="toExamPage(item.id)"></u-icon>
				<text id="title">{{item.title}}</text>
				<text id="total-score">总分: {{item.totalScore}}</text>
				<text id="duration">时长: {{item.duration}}分钟</text>
				<text id="date-start">自 {{item.startTime}}</text>
				<text id="date-end">至 {{item.endTime}}</text>
				<u-tag id="state" :text="getExamStateText(item)" :type="getExamStateType(item)"></u-tag>
			</view>
		</view>
		<u-loadmore v-if="exams.length > 0" :icon="false" loadmore-text="点击加载更多" height="120rpx" fontSize="32" :status="status" @loadmore="getExamList()"/>
		<u-tabbar :value="tabIdx" @change="onTabPress" :border=false activeColor="#3d5cff" inactiveColor="#b8b8d2">
			<u-tabbar-item text="首页">
				<u-icon slot="active-icon" size="60" name="home" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="home" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="考试">
				<u-icon slot="active-icon" size="60" name="bookmark" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="bookmark" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<u-icon slot="active-icon" size="60" name="account" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="account" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	export default {
		data() {
			return {
				scrollTop: 0,
				iconStyles: {
					fontSize: '32rpx',
					color: 'white'
				},
				topStyles: {
					background: '#3d5cff'
				},
				tabIdx: 1,
				keyword: '',
				customStyles: {
					'border-radius': '24rpx'
				},
				currentPage: 0,
				totalPages: 1,
				showFilter: false,
				filterOptions: [],
				loaded: false,
				exams: [],
				status: 'nomore'
			}
		},
		onLoad() {
			_this = this;
			_this.getExamList();
		},
		onPullDownRefresh() {
			_this.reset();
		},
		onPageScroll(e) {
			_this.scrollTop = e.scrollTop;
		},
		methods: {
			onTabPress: function(idx) {
				if (idx == 0) {
					uni.redirectTo({
						url: '../index/index'
					});
				} else if (idx == 2) {
					if (api.isLoggedIn()) {
						uni.redirectTo({
							url: '../account/account'
						});
					} else {
						uni.navigateTo({
							url: '../login/login'
						});
					}
				}
			},
			reset: function() {
				_this.keyword = '';
				_this.currentPage = 0;
				_this.exams = [];
				_this.getExamList();
			},
			search: function(e) {
				if (e == '') {
					_this.reset();
					return;
				}
				var arr = [];
				_this.exams.forEach(ele => {
					if (ele.title.indexOf(e) > -1) {
						arr.push(ele);
					}
				});
				_this.exams = arr;
			},
			clear: function() {
				_this.reset();
			},
			toExamPage: function(examId) {
				uni.navigateTo({
					url: '../exam/exam?examId=' + examId
				})
			},
			getExamList: function() {
				if (_this.currentPage >= _this.totalPages) {
					return;
				}
				_this.loaded = false;
				_this.status = 'loading';
				_this.currentPage = _this.currentPage+1;
				api.postSync('/api/exam/my', {
					"pageNum": _this.currentPage,
					"pageSize": 10,
				}, (res) => {
					if (res.code == 200) {
						res.data.data.forEach(e => {
							_this.exams.push(e);
						});
						_this.totalPages = res.data.pages;
					}
					if (_this.currentPage < _this.totalPages) {
						_this.status = 'loadmore';
					} else {
						_this.status = 'nomore';
					}
					uni.stopPullDownRefresh();
					_this.loaded = true;
				}, (err) => {
					if (_this.currentPage < _this.totalPages) {
						_this.status = 'loadmore';
					} else {
						_this.status = 'nomore';
					}
					uni.stopPullDownRefresh();
					_this.loaded = true;
				});
			},
			isExamJoinable: function(e) {
				var now = new Date().getTime();
				var startTime = new Date(e.startTime);
				var endTime = new Date(e.endTime);
				return now >= startTime && now <= endTime;
			},
			getExamStateText: function(e) {
				var now = new Date().getTime();
				var startTime = new Date(e.startTime);
				var endTime = new Date(e.endTime);
				if (now < startTime) {
					return '未开始';
				} else if (now >= startTime && now <= endTime) {
					return '进行中';
				}
				return '已结束';
			},
			getExamStateType: function(e) {
				var now = new Date().getTime();
				var startTime = new Date(e.startTime);
				var endTime = new Date(e.endTime);
				if (now < startTime) {
					return 'success';
				} else if (now >= startTime && now <= endTime) {
					return 'warning';
				}
				return 'error';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: fixed;
		background: white;
		height: calc(var(--status-bar-height) + 156rpx);
		width: 100%;
		box-shadow: 0 16rpx 24rpx rgba(184, 184, 210, 0.2);
		z-index: 99;
		top: 0;
		
		#search-bar {
			height: 156rpx;
			width: 670rpx;
			padding-left: 40rpx;
			padding-top: var(--status-bar-height);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	
	.block {
		height: calc(var(--status-bar-height) + 176rpx);
	}
	
	.search-result {
		width: 100%;
		
		#cell {
			position: relative;
			width: 670rpx;
			height: 192rpx;
			margin-left: 40rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 8px 12px rgba(184, 184, 210, 0.2);
			border-radius: 25rpx;
			
			#icon {
				position: absolute;
				background: rgba(234, 234, 255, 1);
				border-radius: 18rpx;
				width: 136rpx;
				height: 136rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-left: 28rpx;
				margin-top: 28rpx;
			}
			
			#join {
				position: absolute;
				font-size: 28rpx;
				right: 80rpx;
				margin-top: 36rpx;
				color: #606266;
			}
			
			#join-arrow {
				position: absolute;
				font-size: 28rpx;
				right: 48rpx;
				margin-top: 40rpx;
			}
			
			#title {
				position: absolute;
				color: rgba(31, 31, 57, 1);
				font-size: 28rpx;
				font-weight: 800;
				margin-left: 195rpx;
				margin-top: 28rpx;
			}
			
			#total-score {
				position: absolute;
				color: rgba(184, 184, 210, 1);
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 195rpx;
				margin-top: 68rpx;
			}
			
			#duration {
				position: absolute;
				color: rgba(184, 184, 210, 1);
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 325rpx;
				margin-top: 68rpx;
			}
			
			#date-start {
				position: absolute;
				color: rgba(184, 184, 210, 1);
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 195rpx;
				margin-top: 102rpx;
			}
			
			#date-end {
				position: absolute;
				color: rgba(184, 184, 210, 1);
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 195rpx;
				margin-top: 132rpx;
			}
			
			#state {
				position: absolute;
				right: 28rpx;
				bottom: 28rpx;
			}
		}
	}
</style>
